<template>
  <div class="container" :style="{ backgroundImage: `url(${background})` , backgroundSize: 'cover', backgroundRepeat: 'no-repeat',backgroundPosition: 'center'}">
    <header class="header">
      <h1>杂草检测系统数据分析室</h1>
    </header>
    <main class="main">
      <section class="main-left-content card" ref="map50ChartContainer">
        <!-- 左侧内容 -->
      </section>
      <section class="main-right-content card">
        <!-- 右侧内容 -->
        <section class="main-right-content-top card" ref="chartContainer">
          <!-- 上半部分内容 -->
        </section>
        <section class="main-right-content-bottle card">
          <!-- 下半部分内容 -->
          <section class="main-right-content-bottle-left" ref="lossChartContainer">
            <!-- 左侧内容 -->
          </section>
          <section class="main-right-content-bottle-right">
            <!-- 右侧内容 -->
          </section>
        </section>
      </section>
    </main>
    <footer class="footer">
      <!-- 底部内容 -->
      <footer class="footer-left">
        <div class="upload-container">
          <label for="file-upload" class="upload-label">
            <i class="fas fa-upload"></i>
            上传文件
          </label>
          <input type="file" id="file-upload" accept=".csv" @change="handleFileUpload" class="upload-input">
        </div>
      </footer>
      <footer class="footer-right">
        <!-- 右侧内容 -->
        <button class="analyze-button" @click="handleAnalyze">分析文件</button>
      </footer>

    </footer>
  </div>
</template>




<script>
import echarts from 'echarts';
import Background from '@/assets/detect/background-fenxi.png'
export default {

  name: 'IndexPage',
  data() {
    return {
      background: Background,
      uploadedFile: null,
      chart: null,
      lossChart: null,
      map50Chart: null
    };
  },
  mounted() {
    this.initChart();
    this.initMap50Chart();
    this.initLossChart();
  },
  methods: {
    initLossChart() {
      const chartDom = this.$refs.lossChartContainer;
      this.lossChart = echarts.init(chartDom);
      const option = {
        title: {
          text: 'loss折线图',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          name: '损失函数',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [{
          data: [],
          type: 'line',
          smooth: true,
          areaStyle: {}
        }]
      };
      this.lossChart.setOption(option);
    },
    initChart() {
      const chartDom = this.$refs.chartContainer;
      this.chart = echarts.init(chartDom);
      const option = {
        title: {
          text: '准确率折线图',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          name: '准确率',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [{
          data: [],
          type: 'line',
          smooth: true,
          areaStyle: {}
        }]
      };
      this.chart.setOption(option);
    },
    initMap50Chart() {
      const chartDom = this.$refs.map50ChartContainer;
      this.map50Chart = echarts.init(chartDom);
      const option = {
        title: {
          text: 'mAP折线图',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          name: 'mAP50',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [{
          data: [],
          type: 'line',
          smooth: true,
          areaStyle: {}
        }]
      };
      this.map50Chart.setOption(option);
    },
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file && file.name.endsWith('.csv')) {
        this.uploadedFile = file;
      } else {
        alert('请选择一个 .csv 文件');
        this.uploadedFile = null;
      }
    },
    handleAnalyze() {
      if (!this.uploadedFile) {
        alert('请先上传一个 .csv 文件');
        return;
      }

      const reader = new FileReader();
      reader.onload = (e) => {
        const text = e.target.result;
        console.log(text);
        const data = this.parseCSV(text);
        // console.log(data)
        this.updateChart(data);
        this.updateMap50Chart(data);
        this.updateLossChart(data);
      };
      reader.readAsText(this.uploadedFile);
    },
    parseCSV(text) {
      const lines = text.split('\n');

      const xAxisData = [];
      const seriesData = [];
      const lossData = [];
      const map50Data = [];

      lines.forEach((line, index) => {
        if (index === 0) return; // Skip header row
        const columns = line.split(',');

        if (columns.length >= 4) {
          xAxisData.push(columns[0].trim());
          lossData.push(parseFloat(columns[3].trim()));
          seriesData.push(parseFloat(columns[4].trim()));
          map50Data.push(parseFloat(columns[6].trim()));
        }
      });

      return { xAxisData, seriesData, map50Data,lossData };
    },
    updateLossChart(data) {
      const option = {
        xAxis: {
          data: data.xAxisData
        },
        series: [{
          data: data.lossData
        }]
      };
      this.lossChart.setOption(option);
    },
    updateChart(data) {
      const option = {
        xAxis: {
          data: data.xAxisData
        },
        series: [{
          data: data.seriesData
        }]
      };
      this.chart.setOption(option);
    },
    updateMap50Chart(data) {
      const option = {
        xAxis: {
          data: data.xAxisData
        },
        series: [{
          data: data.map50Data
        }]
      };
      this.map50Chart.setOption(option);
    }
  }
}
</script>

<style>

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {

  height: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.main {
  display: flex;
  height: 65%;
}

.main-left-content {
  flex: 1;

  margin: 0;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.main-right-content {
  flex: 1;

  margin: 0;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  justify-content: space-between; /* 使子元素分别位于顶部和底部 */
}

.main-right-content-top {
  flex: 1;

  margin: 0;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
  padding: 10px; /* 添加一些内边距 */
}

.main-right-content-bottle {
  flex: 1;

  margin: 0;
  height: 50%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row; /* 水平排列子元素 */
  justify-content: space-between; /* 使子元素分别位于左侧和右侧 */
}

.main-right-content-bottle-left {
  flex: 1;

  margin: 0;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.main-right-content-bottle-right {
  flex: 1;

  margin: 0;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.footer {

  height: 10%; /* 调整高度以适应内容 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 使左右内容分开 */
  color: white;
  padding: 0;
}

.footer-left, .footer-right {
  display: flex;
  width: 50%;
  align-items: center; /* 垂直居中 */
  justify-content: center;
}

.upload-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-label {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4CAF50;
  color: white;
  padding: 10px 100px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;

}

.upload-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  width: 260px;
}

.analyze-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4CAF50;
  color: white;
  padding: 10px 100px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  border: none;
}

.card {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 0px;
  padding: 0;
}

/* 确保图表容器能够完全填充 */
#chartContainer {
  width: 100%;
  height: 100%;
}
</style>


